<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a {
				font-size: 13px;
				background-color: #EE0000;
				color: #ffffff;
				width: 20px;
				text-decoration: none;
			}
			
			img {
				width: 360px;
				height: 250px;
			}
		</style>
		<script>
			//nowShow为当前显示的图像序号
			var nowShow = 1;

			function show(index) {
				//如果index是数字
				//如果点击了数字序号按钮，则停止轮播，进行显示当前选择的图片
				if(Number(index)) {
					//当点击图片上的序号时，清空定时器，只显示当前的这张图片
					//清除定时器
					clearTimeout(sid); //当点击按扭时，清除计时器
					//不再通过定时器进行逐个显示，而是直接跳转到选择的图片序号进行显示
					nowShow = index;
				}
				//循环找出当前显示的图片并进行显示，同时将其他的图片隐藏
				for(var i = 1; i < 5; i++) {
					//分别显示、隐藏对应图像
					if(i == nowShow) {
					//当前显示的图片   
					// trip： 使用固定前缀+计数器的方式，获取不同的对象
					document.getElementById("img" + nowShow).style.display = "";
				} else {
					document.getElementById("img" + i).style.display = "none"
				}
			}
			//设置下一个图像  图片计数器加1 进行显示下一张图片
			nowShow = (nowShow % 4 + 1);

			sid = setTimeout('show()', 3000)
			}
		</script>
	</head>

	<body onload="show()">
		<div style="position:absolute;left:60px;top:60px;">
			<img id="img1" src="imgs/banner1.jpg" style="display:none;" border="1">
			<img id="img2" src="imgs/banner2.jpg" style="display:none;" border="1">
			<img id="img3" src="imgs/banner3.jpg" style="display:none;" border="1">
			<img id="img4" src="imgs/banner4.jpg" style="display:none;" border="1">
		</div>
		<div style="position:absolute;left:300px;top:230px;" align="center">
			<a href="javascript:show(1)">1</a>
			<a href="javascript:show(2)">2</a>
			<a href="javascript:show(3)">3</a>
			<a href="javascript:show(4)">4</a>
		</div>
	</body>

</html>